<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<jsp:include  page="common.jsp"></jsp:include>
<!--  第一步：编写模版。你可以使用一个script标签存放模板，如：-->


</head>
<body>
    <div id="view"></div>
</body>
<script id="demo" type="text/html">
    <h3>{{ d.title }}</h3>
<ul>
{{#  layui.each(d.list, function(index, item){ }}
  <li>
    <span>{{ item.modname }}</span>
    <span>{{ item.alias }}：</span>
    <span>{{ item.site || '' }}</span>
  </li>
{{#  }); }}
{{#  if(d.list.length === 0){ }}
  无数据
{{#  } }} 
</ul>
</script>
<script>
	//第三步：渲染模版
	var data = { //数据
	  "title":"Layui常用模块"
	  ,"list":[{"modname":"弹层","alias":"layer","site":"layer.layui.com"},{"modname":"表单","alias":"form"}]
	}
	var getTpl = demo.innerHTML
	,view = document.getElementById('view');
	laytpl(getTpl).render(data, function(html){
	  view.innerHTML = html;
	});
</script>
</html>